<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>标题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

</head>
<body>

<table class="layui-table" id="test" lay-filter="test"></table>
<%--表头栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container" >
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="createTable">新增图书类型</button>
    </div>
</script>
        <!--数据表格右侧按钮组-->
<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
<%--        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>--%>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
</script>
<%--表单编辑--%>
<form id="formData" lay-filter="formData" action="${pageContext.request.contextPath}/type/insertType" style="display: none" class="layui-form">
<%--    <input type="text" name="bookid" hidden>--%>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">图书类型</label>
            <div class="layui-input-inline">
                <input type="text" name="typename" placeholder="请输入类型" lay-verify="typename" autpcomplete="off"  class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-filter="*">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript">
    layui.use(['table','form','jquery','layer'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        $(function () {
            //当页面加载完成后执行的事件
            showTable();

        });

        function showTable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/type/getNumberType'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,totalRow: true
                ,"close": true //开关状态
                ,title: '商品信息'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'typeid', title:'ID', edit: 'text'}
                    ,{field:'typename', title:'图书类型', unresize: true, sort: true}
                    ,{field:'count(*)', title:'数量',  edit: 'text',sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,10,15]
                ,text:{
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            });
        }

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case'createTable':
                    $("#formData")[0].reset();
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: '新增书籍'
                        ,maxmin: true
                        ,offset: '100px'
                        // ,area:['380px','360px']
                        ,content: $("#formData")
                    },function(obj){
                        if(obj.code==1){
                            layer.msg(obj.msg,{icon:1});
                            showTable();
                        }else {
                            layer.msg(obj.msg,{icon:5});
                        }
                    });

                    showTable();
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //编辑
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.typeid + ' 的查看操作');
                //查看详情
                layer.open({
                    type: 1
                    ,title: '书籍类型信息'
                    ,maxmin: true
                    ,offset: '100px'
                    ,content:''
                })
            }else if(obj.event === 'edit'){
                $("#formData")[0].reset();
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '新增书籍类型'
                    ,maxmin: true
                    ,offset: '100px'
                    ,area:['380px','360px']
                    ,content: $("#formData")
                });
                //填充选中行数据到指定表单
                form.val('formData', data);
            }else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.post('${pageContext.request.contextPath}/type/deleteType',{"typeid":data.typeid},function (delobj) {
                        if(delobj.code==1){
                            layer.msg(delobj.msg,{icon:1});
                            showTable();
                        }else {
                            layer.msg(delobj.msg,{icon:5});
                        }
                    },'json');
                    layer.closeAll();
                });
            }
        });

        /**
         * 监听表单提交
         */
        form.on('submit(*)', function(data){
            console.log(data.field);
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/type/insertType',
                dataType: 'json',
                data:data.field,
                success:function (result){
                    layer.closeAll();
                    if (result.code ==1 ){
                        showTable();
                        layer.msg(result.msg, {icon: 1});
                    }else{
                        layer.msg(result.msg, {icon: 5});
                    }
                }
            });
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</body>
</html>
